<template>
  <div class="common-custom-Wrap">
    <div class="common-custom-head">
      <span>{{name}}</span>
    </div>
    <div class="common-custom-content">
      <slot name="content">
<!--        template v-slot:content-->
      </slot>
    </div>
  </div>
</template>
<script>
    export default {
        props: ['name'],
        data () {
            return {

            }
        },
        methods: {
        },
        mounted() {
        }
    }
</script>
<style lang="stylus">
  .common-custom-Wrap{
    height: 100%;
    position: relative;
    &::before{
      content: '';
      display: block;
      position: absolute;
      width: 100%; height: 100%;
      left: 0; top: 0;
      background:  rgba(49, 142, 224 , 5%);
      z-index: -1;
    }
    .common-custom-head{
      height: 50px;
      background-image: url("../../assets/img/HuaiNanImg/common_Wrap_Head.png")
      background-repeat: no-repeat;
      background-position: 0px -17px;
      background-size: 100% 100%;
      text-align: center;
      line-height: 50px;
      span{
        background: linear-gradient(to bottom, #38a0ef, #3ebfb8);
        -webkit-background-clip: text;
        color: transparent;
        font-weight: bold;
      }
    }
    .common-custom-content{
      height: calc(100% - 50px);
    }
  }
</style>
